<template>
  <div>
    <!-- <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24"> -->
    <el-card shadow="hover">
      <template #header>
        <span>订单量近7日趋势图</span>
      </template>
      <vab-chart
        style="height: 287px; width: 100%"
        :init-options="initOptions"
        :option="option"
        theme="vab-echarts-theme"
      />
    </el-card>
    <!-- </el-col> -->
  </div>
</template>

<script>
import VabChart from '@/extra/VabChart'
import { LineChartData } from '@/api/index/supplier'

export default {
  name: 'VabChartLine',
  components: {
    VabChart,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      initOptions: {
        renderer: 'svg',
      },
      option: {
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
            },
          },
        },
        legend: {
          data: ['订单量'],
          itemGap: 5,
          top: -5,
          left: 250,
        },
        grid: {
          top: 20,
          right: 20,
          bottom: 40,
          left: 40,
        },
        xAxis: {
          type: 'category',
          data: [
            '初始用户',
            '1天后',
            '2天后',
            '3天后',
            '4天后',
            '5天后',
            '6天后',
          ],
        },
        yAxis: {
          type: 'value',
        },
        series: {
          name: '订单量',
          data: [],
          type: 'line',
        },
      },
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    this.trrigerLineChartData()
    this.timer = setInterval(() => {
      this.trrigerLineChartData()
    }, 10000)
  },
  methods: {
    async trrigerLineChartData() {
      const res = await LineChartData()
      this.option.series.data = res.data
    },
  },
}
</script>
